package com.hgm.study.ui.components

/**
 * @author    HGM
 * @version   1.0
 */
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Divider
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
import coil.compose.AsyncImage
import com.hgm.study.model.entity.Video
import com.hgm.study.viewmodel.VideoViewModel

@Composable
fun VideoItem(video: Video) {

      //解耦方式的约束布局
      val constraints = ConstraintSet {
            val title = createRefFor("title")
            val type = createRefFor("type")
            val duration = createRefFor("duration")
            val image = createRefFor("image")
            val divider = createRefFor("divider")

            //关联引用的代码.......
            constrain(image) {
                  centerVerticallyTo(parent)
                  width = Dimension.value(115.5.dp)
                  height = Dimension.value(70.dp)
                  start.linkTo(parent.start, 16.dp)
            }

            constrain(title) {
                  width = Dimension.fillToConstraints
                  start.linkTo(image.end, 8.dp)
                  top.linkTo(image.top)
                  end.linkTo(parent.end, 16.dp)
            }

            constrain(type) {
                  start.linkTo(image.end, 8.dp)
                  top.linkTo(title.bottom, 8.dp)
                  bottom.linkTo(parent.bottom, 16.dp)
            }

            constrain(duration) {
                  start.linkTo(type.end, 8.dp)
                  top.linkTo(title.bottom, 8.dp)
                  bottom.linkTo(parent.bottom, 16.dp)
                  end.linkTo(parent.end)
            }

            constrain(divider) {
                  top.linkTo(image.bottom, 8.dp)
            }

      }


      ConstraintLayout(
            constraints, modifier = Modifier
                  .fillMaxWidth()
                  .clickable {  }
      ) {
            AsyncImage(
                  model = video.imageUrl,
                  contentScale = ContentScale.Crop,
                  contentDescription = null,
                  modifier = Modifier
                        .layoutId("image")
                        .clip(RoundedCornerShape(2.dp))
            )

            Text(
                  text = video.title,
                  fontSize = 16.sp,
                  maxLines = 2,
                  overflow = TextOverflow.Ellipsis,
                  modifier = Modifier.layoutId("title")
            )
            Text(
                  text = "视频课件",
                  color = Color(0xFF999999),
                  fontSize = 14.sp,
                  modifier = Modifier.layoutId("type")
            )
            Text(
                  text = video.duration,
                  color = Color(0xFF999999),
                  fontSize = 14.sp,
                  modifier = Modifier.layoutId("duration")
            )

            Divider(modifier = Modifier.layoutId("divider").padding(horizontal = 16.dp))
      }


}

